import React, {Component} from 'react';
import {ScrollView, Alert} from 'react-native';
import {
  Colors,
  View,
  Text,
  ColorSwatch,
  Button
} from 'react-native-ui-lib'; //eslint-disable-line
import {TestCase, TestSuite} from '@rnoh/testerino';

export default class ColorSwatchScreen extends Component {
  colors = [
    'transparent',
    Colors.$backgroundSuccessHeavy,
    Colors.$backgroundWarningHeavy,
    Colors.$backgroundDangerHeavy,
  ];

  state = {
    color: this.colors[0],
    selected: false,
  };

  onPress = () => {
    this.setState({selected: !this.state.selected});
  };

  unavailableOnPress = () => {
    console.log(`Pressed on unavailable color swatch!`);
  };

  render() {
    const {selected} = this.state;

    return (
      <TestSuite name="ColorSwatch">
        <TestCase itShould="设置onPress, animated:true">
          <View padding-20>
            <Text>onPress, animated:true</Text>
            <ColorSwatch
              selected={selected}
              animated={true}
              onPress={()=>{
                Alert.alert(`callback onPress method`)
                this.onPress();
              }}
            />
            <Text>animated:false</Text>
            <ColorSwatch
              animated={false}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置selected, color: red">
          <View padding-20>
            <Text>selected: true</Text>
            <ColorSwatch
              color='red'
              selected={true}
            />
            <Text>selected: false</Text>
            <ColorSwatch
              selected={false}
              color='red'
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 size, testID">
          <View padding-20>
            <Text>size: 20</Text>
            <ColorSwatch size={20}/>
            <Text>size: 40, testID: colorSwatch</Text>
            <ColorSwatch size={40} testID='colorSwatch'/>
            <Button
              onPress={()=>{
                Alert.alert("testID: colorSwatch")
              }}>
              <Text white>testID</Text>
            </Button>
          </View>
        </TestCase>
        <TestCase itShould="设置 Unavailable">
          <View padding-20>
            <Text>unavailable:true</Text>
            <ColorSwatch
              unavailable
              onPress={this.unavailableOnPress}
              color={Colors.yellow10}
            />
            <Text>unavailable:false</Text>
            <ColorSwatch
              unavailable={false}
              color={Colors.yellow10}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 value:product-red, index:1">
          <View padding-20>
            <ColorSwatch color="#ff0000" value="product-red" index= {1} onPress={
              (value, colorInfo)=>{
                Alert.alert(`value: ${value}, index: ${colorInfo.index}`)
              }
            }/>
          </View>
        </TestCase>
        <TestCase itShould="设置 style">
          <View padding-20>
            <Text>borderRadius: 0, borderWidth:2, borderColor:'red', width:60, height: 60</Text>
            <ColorSwatch style={{borderRadius: 0, borderWidth:2, borderColor:'red', width:60, height: 60}} selected/>
            <Text>borderRadius: 8, borderWidth:1, borderColor:'green', width:50, height: 50</Text>
            <ColorSwatch style={{borderRadius: 8, borderWidth:1, borderColor:'green', width:50, height: 50}} selected/>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}
